<template>
  <div class="testStart-pages">
    <van-nav-bar title="单词表" left-arrow @click-left="goBack" />

    <div class="container" v-if="wordList.data.length >= 1">
      <div class="question">
        <div style="text-align: center">
          <p>单词：{{ wordList.data[wordList.active].description }}</p>
          <p style="font-size: 1.1rem; color: #999">
            描述：{{ wordList.data[wordList.active].name }}
          </p>
          <p style="font-size: 1.1rem; color: #999">
            同意词：{{ wordList.data[wordList.active].samewordlist }}
          </p>
        </div>
      </div>
      <div class="Controls">
        <button @click="previous">上一条</button>
        <button @click="next">下一条</button>
      </div>
    </div>
    <div v-else>
      <van-empty description="暂时无题目" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getWords } from "../api/words";
const router = useRouter();
const route = useRoute();
const activeNames = ref([""]);
const wordList = ref({
  active: 0,
  data: [],
});
onMounted(() => {
  getWordsList(route.query.bookId);
});
const getWordsList = async (bookId) => {
  const res = await getWords({ id: bookId });
  showNotify({
    type: res.success ? "success" : "danger",
    message: res.success ? "获取成功" : "获取失败",
  });
  console.log(res.data);
  if (res.success) {
    wordList.value.data = res.data.wordlist;
  }
};
const previous = () => {
  if (wordList.value.active > 0) {
    wordList.value.active--;
  }
};

const next = () => {
  console.log(wordList.value.active , wordList.value.data.length - 1)
  if (wordList.value.active < wordList.value.data.length - 1) {
    wordList.value.active++;
  }
};

const goBack = () => {
  router.back();
};

const editWordbook = (id) => {
  // 编辑单词本逻辑
  console.log("编辑单词本", id);
};
</script>

<style scoped>
.container {
  padding: 10px;
}
.container .question {
  width: 100%;
  height: 60vh;
  /* text-align: center; */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.container .Controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}
.container .Controls > button {
  border: none;
  box-sizing: border-box;
  background-color: #fff;
  /* padding: 20px; */
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 1rem;
  border-radius: 10px;
}
</style>
